Attempt to streamline UI for various error cases #1626

tk-o · 2026-02-10T16:21:16Z

Lite PR

Tip: Review docs on the ENSNode PR process

Summary

Includes:

Connecting with invalid URL.
Connecting to unavailable host.
Fetching invalid data from host.

Why

ENSAdmin has to handle various ENSNode connection errors very gracefully in the UI.

Testing

How this was tested.
If you didn't test it, say why.

Notes for Reviewer (Optional)

I'm applying as simple updates as I can to avoid sinking in ENSAdmin refactorings that would stop me from progressing other goals.

Pre-Review Checklist (Blocking)

This PR does not introduce significant changes and is low-risk to review quickly.
Relevant changesets are included (or are not required)

Includes 1) connecting with invalid URL; 2) connecting to unavailable host; 3) fetching invalid data from host.

changeset-bot · 2026-02-10T16:21:21Z

⚠️ No Changeset found

Latest commit: 9493bf3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2026-02-10T16:21:25Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
admin.ensnode.io	Ready	Preview, Comment	Feb 10, 2026 4:21pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
ensnode.io	Skipped		Feb 10, 2026 4:21pm
ensrainbow.io	Skipped		Feb 10, 2026 4:21pm

Copilot

Pull request overview

This PR refines ENSAdmin’s UI handling for ENSNode connection failures by centralizing the error display and ensuring the page header still renders when the selected connection is invalid.

Changes:

Introduces a shared ENSNodeConnectionError component for connection-related error UI.
Updates SelectedENSNodeProvider to always render a provided header, even when the selected connection URL is invalid.
Switches RequireActiveConnection to use the shared connection error UI on ENSNode config errors.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx	Adds a `header` prop and renders it in both valid/invalid connection flows; uses shared connection error UI for invalid URL case.
apps/ensadmin/src/components/layout-wrapper.tsx	Passes the existing header markup into `SelectedENSNodeProvider` via the new `header` prop.
apps/ensadmin/src/components/connections/require-active-connection.tsx	Uses `ENSNodeConnectionError` instead of `ErrorInfo` when `useENSNodeConfig()` reports an error.
apps/ensadmin/src/components/connections/connection-error.tsx	Adds `ENSNodeConnectionError` wrapper around `ErrorInfo` with standardized messaging.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-10T16:25:31Z

apps/ensadmin/src/components/connections/require-active-connection.tsx

+        <ENSNodeConnectionError
+          error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}
+        />


ENSNodeConnectionError always renders the title "Unable to connect to ENSNode", but here the error being surfaced is "Unable to parse ENSNode Config". This makes the UI message inconsistent; either keep using ErrorInfo for config-parse failures or make ENSNodeConnectionError accept an overridable title/description.

Copilot · 2026-02-10T16:25:32Z

apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx

 * @param children - React children to render within the provider context
 */
-export function SelectedENSNodeProvider({ children }: PropsWithChildren) {
+export function SelectedENSNodeProvider({
+  header,
+  children,
+}: PropsWithChildren<{ header: React.ReactNode }>) {


The JSDoc for SelectedENSNodeProvider only documents children, but the component now requires a header prop as well. Update the doc comment to describe the new prop and its purpose (rendered even when the selected connection is invalid).

Copilot · 2026-02-10T16:25:32Z

apps/ensadmin/src/components/providers/selected-ensnode-provider.tsx

    // between the selected connection being in a valid format or not.
    // This logic will throw and an error and break if the selected connection
    // is in an invalid format.

    return (


The TODO comment says the invalid-format path "will throw and break", but this branch now handles invalid URLs by rendering an error component. Update or remove the comment to reflect the current behavior (and clarify what still needs refactoring, if anything).

Copilot · 2026-02-10T16:25:32Z

apps/ensadmin/src/components/connections/connection-error.tsx

+export function ENSNodeConnectionError({ error }: { error: Error }) {
+  return (
+    <ErrorInfo
+      title="Unable to connect to ENSNode"
+      description={`Please check your connection settings and try again. Error: ${error.message}`}


ENSNodeConnectionError hard-codes the title and formats the full error message into the description, which makes it awkward to reuse for non-connection failures (e.g. config parse errors). Consider accepting optional title/description overrides (or an ErrorInfoProps passthrough) so callers can keep messaging accurate while still sharing the layout.

Suggested change

export function ENSNodeConnectionError({ error }: { error: Error }) {

return (

<ErrorInfo

title="Unable to connect to ENSNode"

description={`Please check your connection settings and try again. Error: ${error.message}`}

export function ENSNodeConnectionError({

error,

title,

description,

}: {

error: Error;

title?: string;

description?: string;

}) {

return (

<ErrorInfo

title={title ?? "Unable to connect to ENSNode"}

description={

description ??

`Please check your connection settings and try again. Error: ${error.message}`

}

Copilot · 2026-02-10T16:25:33Z

apps/ensadmin/src/components/connections/require-active-connection.tsx

 import { useENSNodeConfig } from "@ensnode/ensnode-react";

+import { ENSNodeConnectionError } from "@/components/connections/connection-error";
 import { ErrorInfo } from "@/components/error-info";


ErrorInfo is imported but no longer used after switching to ENSNodeConnectionError; remove the unused import to keep lint/typecheck clean.

Suggested change

import { ErrorInfo } from "@/components/error-info";

Copilot · 2026-02-10T16:25:33Z

apps/ensadmin/src/components/connections/require-active-connection.tsx

+        <ENSNodeConnectionError
+          error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}
+        />


Wrapping error in new Error(...) drops the original error object (stack/cause). Consider either passing the original error through to ENSNodeConnectionError (and letting it format unknowns safely), or construct the new error with { cause: error } so debugging info is preserved.

vercel · 2026-02-10T16:31:48Z

apps/ensadmin/src/components/connections/require-active-connection.tsx

      <section className="p-6">
-        <ErrorInfo title="Unable to parse ENSNode Config" description={error.message} />
+        <ENSNodeConnectionError
+          error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}


Suggested change

error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}

error={new Error(`Unable to parse ENSNode Config: ${error.message}`)}

Using optional chaining on error field when it's guaranteed to be defined by React Query's type system after status check

Attempt to streamline UI for various error cases

9493bf3

Includes 1) connecting with invalid URL; 2) connecting to unavailable host; 3) fetching invalid data from host.

Copilot AI review requested due to automatic review settings February 10, 2026 16:21

Copilot started reviewing on behalf of tk-o February 10, 2026 16:21 View session

Copilot AI reviewed Feb 10, 2026

View reviewed changes

vercel bot reviewed Feb 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Attempt to streamline UI for various error cases #1626

Attempt to streamline UI for various error cases #1626

tk-o commented Feb 10, 2026

Uh oh!

changeset-bot bot commented Feb 10, 2026

Uh oh!

vercel bot commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

vercel bot Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	error={new Error(`Unable to parse ENSNode Config: ${error?.message}`)}
	error={new Error(`Unable to parse ENSNode Config: ${error.message}`)}

Attempt to streamline UI for various error cases #1626

Are you sure you want to change the base?

Attempt to streamline UI for various error cases #1626

Conversation

tk-o commented Feb 10, 2026

Lite PR

Summary

Why

Testing

Notes for Reviewer (Optional)

Pre-Review Checklist (Blocking)

Uh oh!

changeset-bot bot commented Feb 10, 2026

⚠️ No Changeset found

Uh oh!

vercel bot commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant